<template>
  <div class="footer">
    <ul>
      <li @click="tabBar(0)">
        <img :src="classIcon">
        <p :class="[tab1?'active':'']">选课中心</p>
      </li>
      <li @click="tabBar(1)">
        <img :src="zeroIcon" alt>
        <p :class="[tab2?'active':'']">0元学</p>
      </li>
      <li @click="tabBar(2)">
        <img :src="centerIcon" alt>
        <p :class="[tab3?'active':'']">个人中心</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  components: {},
  mounted() {
    console.log(this.$route.path);
    var path = this.$route.path;
    if (path == "/PersonCenter") {
      this.centerIcon = this.mySelect;
      this.tab3 = true;
    } else if (path == "/") {
      this.classIcon = this.classSelect;
      this.tab1 = true;
    } else {
      this.zeroIcon = this.zeroSelect;
      this.tab2 = true;
    }
  },
  data() {
    return {
      classIcon: require("../assets/images/classNoSelect.png"),
      classSelect: require("../assets/images/classSelect.png"),
      classNoSelect: require("../assets/images/classNoSelect.png"),
      zeroIcon: require("../assets/images/zeroNoSelect.png"),
      zeroNoSelect: require("../assets/images/zeroNoSelect.png"),
      zeroSelect: require("../assets/images/zeroSelect.png"),
      centerIcon: require("../assets/images/myNoSelect.png"),
      myNoSelect: require("../assets/images/myNoSelect.png"),
      mySelect: require("../assets/images/mySelect.png"),
      tab1: false,
      tab2: false,
      tab3: false
    };
  },
  methods: {
    tabBar(index) {
      if (index == 0) {
        this.$router.push({ path: "/" });
      }
      if (index == 1) {
        this.$router.push({ path: "/IndexHome" });
      }
      if (index == 2) {
        this.$router.push({ path: "/PersonCenter" });
      }
    }
  }
};
</script>
<style scoped lang="scss">
.footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  height: 0.96rem;
  background: #fff;
  border-top: 1px solid #e5e5e5;

  ul {
    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    li {
      flex: 1;
      -webkit-flex: 1;
      font-size: 0.24rem;
      text-align: center;
      padding-top: 0.1rem;
      &:nth-child(1) img {
        width: 0.52rem;
        height: 0.45rem;
      }
      &:nth-child(2) img {
        width: 0.52rem;
        height: 0.45rem;
      }
      &:nth-child(3) img {
        width: 0.52rem;
        height: 0.45rem;
      }
      p {
        padding-top: 0.1rem;
        font-size: 0.2rem;
        &.active {
          color: #ff6422;
        }
      }
    }
  }
}
</style>


